<template>
  <div class="form-section">
    <div class="head-title">
      <div class="title" :style="{ '--theme': theme }">{{ title }}</div>
      <div class="cus-icon"><slot name="operate"></slot></div>
    </div>

    <div class="form-fields">
      <div v-for="(field, index) in fields" :key="index" class="form-field">
        <div class="cus-label">{{ field.label }}</div>

        <input
          v-if="field.type === 'input'"
          type="text"
          :placeholder="field.placeholder"
          class="form-input"
          v-model="field.value"
        />

        <div v-else-if="field.type === 'date-range'" class="date-range">
          <input type="date" class="form-input" />
          <span>至</span>
          <input type="date" class="form-input" />
        </div>

        <select v-else-if="field.type === 'select'" class="form-select">
          <option v-for="(option, i) in field.options" :key="i" :value="option">
            {{ option }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed } from "vue";
  import useSettingsStore from "@/store/modules/settings";
  const settingsStore = useSettingsStore();
  defineProps({
    title: String,
    fields: Array,
  });
  const theme = computed(() => {
    return settingsStore.theme;
  });
</script>

<style lang="scss" scoped>
  .form-section {
    background-color: white;
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .form-fields {
    .cus-label {
      width: 180px;
      color: #6c6c6e;
      font-weight: 500;
      font-size: 14px;
    }
  }
  .form-section .head-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .title {
      color: var(--theme);
      font-size: 18px;
      font-weight: 500;
    }
    .cus-icon {
      cursor: pointer;
    }
  }

  .form-field {
    display: flex;
    margin-bottom: 12px;
  }

  .form-field label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
  }

  .form-input,
  .form-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
  }

  .date-range {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .date-range span {
    color: #666;
  }
</style>
